<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>TEST</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css" media="screen">
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap-tagsinput.css">
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap-tagsinput-typeahead.css">
    <!-- <link rel="stylesheet" href="../lib/bootstrap/css/typeaheadjs.css"> -->
</head>

<body>
    <div>
        <input id="ti" type="text" class="form-control typeahead">
        <BUTTON id="test">TEST</BUTTON>
    </div>
    <script type="text/javascript" src="../js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/bootstrap/js/bootstrap-tagsinput.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
    <script type="text/javascript">
    var bestPictures = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: '/project/page',
        remote: {
            url: '/project/page?searchMap[name]=%QUERY',
            wildcard: '%QUERY',
            filter: function(data) {
                if (data && data.retCode == 0) {
                    var projects = new Array();
                    if (data.retVal.list) {
                        data.retVal.list.forEach(function(obj) {
                            projects.push({
                                'id': obj.id,
                                'name': obj.name
                            });
                        });
                        return projects;
                    }
                }
            }
        }
    });
    bestPictures.initialize();

    $('#ti').tagsinput({
        tagClass: function(item) {
            return (item.length > 10 ? 'big' : 'small') + ' label label-warning';
        },
        itemValue: 'id',
        itemText: 'name',
        trimValue: true,
        freeInput: true,
        typeaheadjs: {
            name: 'best-pictures',
            value: 'id',
            display: 'name',
            source: bestPictures
        }
    });

    $('#test').click(function(event) {
        console.info($("#ti").val());
        console.info($("#ti").tagsinput('items'));
    });
    </script>
</body>

</html>
